<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Java">
    <meta name="description" content="学习记录">
    <meta name="author" content="Carry灭霸">
    
    <title>
        
            Vue快速生成自定义vue模板 |
        
        Carry
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN","path":"search.xml"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.svg","favicon":"/images/logo.svg","article_img_align":"center","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Hello World!"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":true}}},"local_search":{"enable":true,"preload":true},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Carry
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">Vue快速生成自定义vue模板</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.svg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Carry灭霸</span>
                        
                            <span class="author-label">Lv4</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2022-01-12 22:15:00
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Vue/">Vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/Vue/">Vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="Vue快速生成自定义vue模板"><a href="#Vue快速生成自定义vue模板" class="headerlink" title="Vue快速生成自定义vue模板"></a>Vue快速生成自定义vue模板</h1><h2 id="安装vscode"><a href="#安装vscode" class="headerlink" title="安装vscode"></a>安装vscode</h2><p>官网：<a class="link"   target="_blank" rel="noopener" href="https://code.visualstudio.com/" >https://code.visualstudio.com/<i class="fas fa-external-link-alt"></i></a></p>
<h2 id="安装-Vetur-插件，识别-vue-文件"><a href="#安装-Vetur-插件，识别-vue-文件" class="headerlink" title="安装 Vetur 插件，识别 vue 文件"></a>安装 Vetur 插件，识别 vue 文件</h2><p>在应用商店中搜索 Vetur，点击安装，安装完成之后点击重新加载</p>
<p><img src="https://gitee.com/carrywl/image-hosting/raw/master/image-codeStudy/image-20220112222022136.png" alt="image-20220112222022136"></p>
<h2 id="新建代码片段"><a href="#新建代码片段" class="headerlink" title="新建代码片段"></a>新建代码片段</h2><p>文件 ➡ 首选项 ➡ 用户代码片段 ➡ 点击新建全局代码片段 ➡ 取名 vue ➡ 确定</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;Print to console&quot;</span>: &#123;</span><br><span class="line">        <span class="string">&quot;prefix&quot;</span>: <span class="string">&quot;vue&quot;</span>,</span><br><span class="line">        <span class="string">&quot;body&quot;</span>: [</span><br><span class="line">            <span class="string">&quot;&lt;!-- $1 --&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;template&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;div class=&#x27;$2&#x27;&gt;$5&lt;/div&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;/template&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;script&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//例如：import 《组件名称》 from &#x27;《组件路径》&#x27;;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;export default &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//import引入的组件需要注入到对象中才能使用&quot;</span>,</span><br><span class="line">            <span class="string">&quot;components: &#123;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;data() &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//这里存放数据&quot;</span>,</span><br><span class="line">            <span class="string">&quot;return &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//监听属性 类似于data概念&quot;</span>,</span><br><span class="line">            <span class="string">&quot;computed: &#123;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//监控data中的数据变化&quot;</span>,</span><br><span class="line">            <span class="string">&quot;watch: &#123;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//方法集合&quot;</span>,</span><br><span class="line">            <span class="string">&quot;methods: &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//生命周期 - 创建完成（可以访问当前this实例）&quot;</span>,</span><br><span class="line">            <span class="string">&quot;created() &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//生命周期 - 挂载完成（可以访问DOM元素）&quot;</span>,</span><br><span class="line">            <span class="string">&quot;mounted() &#123;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;,&quot;</span>,</span><br><span class="line">            <span class="string">&quot;beforeCreate() &#123;&#125;, //生命周期 - 创建之前&quot;</span>,</span><br><span class="line">            <span class="string">&quot;beforeMount() &#123;&#125;, //生命周期 - 挂载之前&quot;</span>,</span><br><span class="line">            <span class="string">&quot;beforeUpdate() &#123;&#125;, //生命周期 - 更新之前&quot;</span>,</span><br><span class="line">            <span class="string">&quot;updated() &#123;&#125;, //生命周期 - 更新之后&quot;</span>,</span><br><span class="line">            <span class="string">&quot;beforeDestroy() &#123;&#125;, //生命周期 - 销毁之前&quot;</span>,</span><br><span class="line">            <span class="string">&quot;destroyed() &#123;&#125;, //生命周期 - 销毁完成&quot;</span>,</span><br><span class="line">            <span class="string">&quot;activated() &#123;&#125;, //如果页面有keep-alive缓存功能，这个函数会触发&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&#125;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;/script&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;style scoped&gt;&quot;</span>,</span><br><span class="line">            <span class="string">&quot;//@import url($3); 引入公共css类&quot;</span>,</span><br><span class="line">            <span class="string">&quot;$4&quot;</span>,</span><br><span class="line">            <span class="string">&quot;&lt;/style&gt;&quot;</span></span><br><span class="line">        ],</span><br><span class="line">        <span class="string">&quot;description&quot;</span>: <span class="string">&quot;生成vue模板&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;http-get请求&quot;</span>: &#123;</span><br><span class="line">	<span class="string">&quot;prefix&quot;</span>: <span class="string">&quot;httpget&quot;</span>,</span><br><span class="line">	<span class="string">&quot;body&quot;</span>: [</span><br><span class="line">		<span class="string">&quot;this.\\$http(&#123;&quot;</span>,</span><br><span class="line">		<span class="string">&quot;url: this.\\$http.adornUrl(&#x27;&#x27;),&quot;</span>,</span><br><span class="line">		<span class="string">&quot;method: &#x27;get&#x27;,&quot;</span>,</span><br><span class="line">		<span class="string">&quot;params: this.\\$http.adornParams(&#123;&#125;)&quot;</span>,</span><br><span class="line">		<span class="string">&quot;&#125;).then((&#123; data &#125;) =&gt; &#123;&quot;</span>,</span><br><span class="line">		<span class="string">&quot;&#125;)&quot;</span></span><br><span class="line">	],</span><br><span class="line">	<span class="string">&quot;description&quot;</span>: <span class="string">&quot;httpGET请求&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&quot;http-post请求&quot;</span>: &#123;</span><br><span class="line">	<span class="string">&quot;prefix&quot;</span>: <span class="string">&quot;httppost&quot;</span>,</span><br><span class="line">	<span class="string">&quot;body&quot;</span>: [</span><br><span class="line">		<span class="string">&quot;this.\\$http(&#123;&quot;</span>,</span><br><span class="line">		<span class="string">&quot;url: this.\\$http.adornUrl(&#x27;&#x27;),&quot;</span>,</span><br><span class="line">		<span class="string">&quot;method: &#x27;post&#x27;,&quot;</span>,</span><br><span class="line">		<span class="string">&quot;data: this.\\$http.adornData(data, false)&quot;</span>,</span><br><span class="line">		<span class="string">&quot;&#125;).then((&#123; data &#125;) =&gt; &#123; &#125;);&quot;</span> </span><br><span class="line">	],</span><br><span class="line">	<span class="string">&quot;description&quot;</span>: <span class="string">&quot;httpPOST请求&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="新建一个-vue-文件输入-vue-测试"><a href="#新建一个-vue-文件输入-vue-测试" class="headerlink" title="新建一个 .vue 文件输入 vue 测试"></a>新建一个 .vue 文件输入 vue 测试</h2><p>上面的配置中：<code>&quot;prefix&quot;: &quot;vue&quot;</code>、<code>&quot;prefix&quot;: &quot;httpget&quot;</code>、<code>&quot;prefix&quot;: &quot;httppost&quot;</code> 就是你的快捷输入名称，可自行修改</p>
<blockquote>
<p>参考🔗: <a class="link"   target="_blank" rel="noopener" href="https://www.cnblogs.com/songjilong/p/12635448.html" >https://www.cnblogs.com/songjilong/p/12635448.html<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>

        </div>

        
            <div class="post-copyright-info">
                <div class="article-copyright-info-container">
    <ul>
        <li>本文标题：Vue快速生成自定义vue模板</li>
        <li>本文作者：Carry灭霸</li>
        <li>创建时间：2022-01-12 22:15:00</li>
        <li>
            本文链接：https://carrywl.gitee.io/2022/01/12/Vue快速生成自定义vue模板/
        </li>
        <li>
            版权声明：本博客所有文章除特别声明外，均采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a> 许可协议。转载请注明出处！
        </li>
    </ul>
</div>

            </div>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2022/02/01/Vue%E8%BF%87%E6%BB%A4%E5%99%A8/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Vue过滤器</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2022/01/12/ES6%E8%A7%A3%E6%9E%84/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">ES6解构</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
            <div class="comment-container">
                <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fas fa-comments">&nbsp;评论</i>
    </div>
    

        
            
    <div class="valine-container">
        <script 
                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
        <div id="vcomments"></div>
        <script >
            function loadValine() {
                new Valine({
                    el: '#vcomments',
                    appId: 'GWXViL9oMzuvk5GoEyorAF5a-gzGzoHsz',
                    appKey: 'tfCnOVhjkUjT90W8EGLYvf0v',
                    meta: ['nick', 'mail', 'link'],
                    avatar: 'wavatar',
                    enableQQ: true,
                    placeholder: '😜 尽情吐槽吧~',
                    lang: 'zh-CN'.toLowerCase()
                });

                function getAuthor(language) {
                    switch (language) {
                        case 'en':
                            return 'Author';
                        case 'zh-CN':
                            return '博主';
                        default:
                            return 'Master';
                    }
                }

                // Add "Author" identify
                const getValineDomTimer = setInterval(() => {
                    const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
                    if (vcards.length > 0) {
                        let author = 'Carry灭霸';

                        if (author) {
                            for (let vcard of vcards) {
                                const vnick_dom = vcard.querySelector('.vhead .vnick');
                                const vnick = vnick_dom.innerHTML;
                                if (vnick === author) {
                                    vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
                                }
                            }
                        }
                        clearInterval(getValineDomTimer);
                    } else {
                        clearInterval(getValineDomTimer);
                    }
                }, 2000);
            }

            if ('false') {
                const loadValineTimeout = setTimeout(() => {
                    loadValine();
                    clearTimeout(loadValineTimeout);
                }, 1000);
            } else {
                window.addEventListener('DOMContentLoaded', loadValine);
            }
        </script>
    </div>



        
    
</div>

            </div>
        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Carry灭霸</a>
        </div>
        
            <script async  src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                
            </div>
        
        <div class="theme-info info-item">
            由 <a target="_blank" href="https://hexo.io">Hexo</a> 驱动&nbsp;|&nbsp;主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fas fa-comment"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90%E8%87%AA%E5%AE%9A%E4%B9%89vue%E6%A8%A1%E6%9D%BF"><span class="nav-text">Vue快速生成自定义vue模板</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85vscode"><span class="nav-text">安装vscode</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85-Vetur-%E6%8F%92%E4%BB%B6%EF%BC%8C%E8%AF%86%E5%88%AB-vue-%E6%96%87%E4%BB%B6"><span class="nav-text">安装 Vetur 插件，识别 vue 文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%B0%E5%BB%BA%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5"><span class="nav-text">新建代码片段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA-vue-%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5-vue-%E6%B5%8B%E8%AF%95"><span class="nav-text">新建一个 .vue 文件输入 vue 测试</span></a></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/dark-light-toggle.js"></script>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/local-search.js"></script>



    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/toc.js"></script>
    
</div>



</body>
</html>
